<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="business/layout">
<head>
<meta charset="utf-8" />
<title>天天点餐</title>
</head>
<body class="no-skin">
	<div layout:fragment="content">
		<div class="main-inner">
			<div class="container">
				<div class="span12">
					<div class="info-box">
						<a
							class="button button-block button-rounded button-action button-large addTableBtn">增添餐桌</a>
						<span>餐桌状态：<select class="input-two"><option
									value="0">空闲</option>
								<option value="1">占用</option>
								<option value="2">预约</option></select><a
							class="button button-glow button-border button-rounded button-primary table-status">搜索</a></span>
						<table id="showTable"
							class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>餐桌号</th>
									<th>餐桌名</th>
									<th>餐桌使用状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>

								<tr th:each="table:${tableList}">
									<td th:text="${table.id}"></td>
									<td th:text="${table.tableName}"></td>
									<td th:if="${table.tablesStatus==0}">空闲</td>
									<td th:if="${table.tablesStatus==1}">占用</td>
									<td th:if="${table.tablesStatus==2}">预约</td>
									<td><!-- <a class='button button-box button-tiny update-table'>
											修改</a> --> <a class='button button-box button-tiny delete-table'>
											删除</a>
											<a class='button button-box button-tiny reserve-table'>
											预约</a> <a class='button button-box button-tiny takeDown-table'>
											退订</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!-- /container -->
		<!-- /main-inner -->

		<div class="modal hide" id="addTableModal" tabindex="-1" role="dialog"
			aria-labelledby="addTableModallabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="addTableModallabel">增添餐桌</h4>
					</div>
					<div class="modal-body">
						<form id="addTableForm" method="post">
							<p>
								餐桌名：<input type="text" name="tableName" />
							</p>
							<p>
								餐桌使用状态：<select name="tablesStatus">
									<option value="0">空闲</option>
									<option value="1">占用</option>
									<option value="2">预约</option>
								</select>
							</p>
							<p id="p-orderDate">
								预约时间<input type="date" name="orderDate" />
							</p>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="addTableSaveBtn" type="button" class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
		</div>
<!-- 
		<div class="modal hide" id="editTableModal" tabindex="-1"
			role="dialog" aria-labelledby="editTableModallabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="editTableModallabel">修改餐桌</h4>
					</div>
					<div class="modal-body">
						<form id="editTableForm" method="post">
							<p>
								<label>餐桌号：</label><input type="text" name="tableId"
									readonly="readonly" />
							</p>
							<p>
								<label>餐桌名： </label><input type="text" name="tableName" />
							</p>
							<p>
								<label>餐桌使用状态：</label><select name="tablesStatus">
									<option value="0">空闲</option>
									<option value="1">占用</option>
									<option value="2">预约</option>
								</select>
							</p>
							<p id="p-orderDate">
								<label>预约时间 </label><input type="date" name="orderDate" />
							</p>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="editTableSaveBtn" type="button"
							class="btn btn-primary">修改</button>
					</div>
					
				</div>
			</div>
		</div> -->
		<div class="modal hide" id="ReserveTableModal" tabindex="-1"
			role="dialog" aria-labelledby="ReserveTableModallabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="ReserveTableModallabel">预约餐桌</h4>
					</div>
					<div class="modal-body">
						<form id="ReserveTableForm" method="post">
							<p>
								<label>餐桌号：</label><input type="text" name="tableId"
									readonly="readonly" />
							</p>
							<p>
								<label>餐桌名： </label><input type="text" name="tableName" readonly="readonly"/>
							</p>
							<p>
								<label>餐桌使用状态：</label><input type="text" name="tablesStatus" value="预约" readonly="readonly"/>
							</p>
							<p id="p-orderDate">
								<label>预约时间 </label><input type="date" name="orderDate" />
							</p>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="ReserveTableSaveBtn" type="button"
							class="btn btn-primary">预约</button>
					</div>
					
				</div>
			</div>
		</div>
		<script type="text/javascript">
			/*<![CDATA[*/
			$(document)
					.ready(
							function() {
								//退订餐桌
								$("tbody").on("click", ".takeDown-table",function()
										 {
									var id = $(this).parent().siblings().eq(0).text();
									var tableName =$(this).parent().siblings().eq(1).text();
									var tablesStatus = 0;
									var orderDate = $(this).parent().siblings().eq(2).val();
									$.ajax({
												type : "post",
												url : "/table/uptadeTable",
												data : {
													id : id,
													tableName : tableName,
													tablesStatus : tablesStatus,
													orderDate : orderDate
												},
												dataType : "json",
												success : function(
														data) {
													if (data.success) {
														alert("退订成功！");
														window.location
																.reload();
													} else {
														alert("退订失败！");
													}
												}
											});
								});
								//预定餐桌
								$("tbody").on("click", ".reserve-table",function()
										 {
									var tableId = $(this)
											.parent()
											.siblings().eq(0)
											.text();
									$.ajax({
												url : "/table/getTableId",
												dataType : "json",
												type : "post",
												data : {
													id : tableId
												},
												success : function(
														data) {
													$(
															"#ReserveTableForm input[name='orderDate']")
															.val(
																	"");
													$(
															"#ReserveTableForm input[name='tableId']")
															.val(
																	data.id);
													$(
															"#ReserveTableForm input[name='tableName']")
															.val(
																	data.tableName);
													
													$(
															"#ReserveTableModal")
															.modal(
																	"show");
												}
											});
								});
								
								$("#ReserveTableSaveBtn").click(function() {
									var id = $("#ReserveTableForm input[name='tableId']").val();
									var tableName = $("#ReserveTableForm input[name='tableName']").val();
									var tablesStatus = 2;
									var orderDate = $("#ReserveTableForm input[name='orderDate']").val();
									$.ajax({
												type : "post",
												url : "/table/uptadeTable",
												data : {
													id : id,
													tableName : tableName,
													tablesStatus : tablesStatus,
													orderDate : orderDate
												},
												dataType : "json",
												success : function(
														data) {
													if (data.success) {
														alert("预约成功！");
														window.location
																.reload();
													} else {
														alert("预约失败！");
													}
												}
											});
								});
								
								//增添餐桌
								$('.addTableBtn')
										.click(
												function() {
													$(
															"#addTableForm input[name='tableName']")
															.val("");
													$(
															"#addTableForm input[name='orderDate']")
															.val("");
													$(
															"#addTableForm select[name='tablesStatus']")
															.trigger("change");
													$('#addTableModal').modal(
															'show');
												});

								//餐桌增添状态更改
								$("#addTableForm select[name='tablesStatus']")
										.change(
												function() {
													var tablesStatus = $(this)
															.val();
													if (tablesStatus == 2) {
														$(
																"#addTableForm #p-orderDate")
																.show();
													} else {
														$(
																"#addTableForm #p-orderDate")
																.hide();
													}
												});

								//增添餐桌保存
								$("#addTableSaveBtn")
										.click(
												function() {
													var tableName = $(
															"#addTableForm input[name='tableName']")
															.val();
													var tablesStatus = $(
															"#addTableForm select[name='tablesStatus']")
															.val();
													var orderDate = $(
															"#addTableForm input[name='orderDate']")
															.val();
													$.ajax({
																url : "/table/addTable",
																type : "post",
																data : {
																	tableName : tableName,
																	tablesStatus : tablesStatus,
																	orderDate : orderDate
																},
																dataType : "json",
																success : function(
																		data) {
																	if (data.success) {
																		alert("增加成功！");
																		window.location.reload();
																	} else {
																		alert("增加失败！");
																	}
																}
															});
												});

								//餐桌状态搜索
								$('.table-status').click(function() {
									
													var tablesStatus = $('.input-two').val();
													$.ajax({
																url : '/table/getTableStatus',
																dataTye : 'json',
																type : 'post',
																data : {
																	tablesStatus : tablesStatus
																},
																success : function(
																		data) {
																	var htmlString = "";
																	for (var i = 0; i < data.length; i++) {
																		for (var i = 0; i < data.length; i++) {
																			var status = "";
																			if (data[i].tablesStatus == 0) {
																				status = "空闲";
																			} else if (data[i].tablesStatus == 1) {
																				status = "占用";
																			} else {
																				status = "预约";
																			}
																			htmlString += "<tr>";
																			htmlString += "<td>"
																					+ data[i].id
																					+ "</td>";
																			htmlString += "<td>"
																					+ data[i].tableName
																					+ "</td>";
																			htmlString += "<td>"
																					+ status
																					+ "</td>";
																			 /* htmlString += "<td><a class='button button-box button-tiny update-table'>"
																					+ "修改"
																					+ "</a>";  */
																			htmlString += "<td><a class='button button-box button-tiny delete-table'>"
																					+ "删除"
																					+ "</a>";
																					htmlString += "<a class='button button-box button-tiny reserve-table'>"
																						+ "预约"
																						+ "</a>";
																						htmlString += "<a class='button button-box button-tiny takeDown-table'>"
																							+ "退订"
																							+ "</a></td>";
																			htmlString += "</tr>";
																		}
																	}
																	$(
																			'#showTable tbody')
																			.html(
																					htmlString);
																}
															});
												});

								/* //餐桌修改
								$("tbody").on("click", ".update-table",
								function() {
													var tableId = $(this)
															.parent()
															.siblings().eq(0)
															.text();
													$.ajax({
																url : "/table/getTableId",
																dataType : "json",
																type : "post",
																data : {
																	id : tableId
																},
																success : function(
																		data) {
																	$(
																			"#editTableForm input[name='orderDate']")
																			.val(
																					"");
																	$(
																			"#editTableForm input[name='tableId']")
																			.val(
																					data.id);
																	$(
																			"#editTableForm input[name='tableName']")
																			.val(
																					data.tableName);
																	$(
																			"#editTableForm select[name='tablesStatus']")
																			.val(
																					data.tablesStatus);
																	$(
																			"#editTableForm select[name='tablesStatus']")
																			.trigger(
																					"change");
																	if (data.tablesStatus == 2) {
																		$(
																				"#editTableForm #p-orderDate")
																				.show();
																		$(
																				"#editTableForm input[name='orderDate']")
																				.val(
																						data.orderDate);
																	} else {
																		$(
																				"#editTableForm #p-orderDate")
																				.hide();
																	}
																	$(
																			"#editTableModal")
																			.modal(
																					"show");
																}
															});
												}); */
											
								//餐桌修改状态更改
								$("#editTableForm select[name='tablesStatus']").change(function() {
													var tablesStatus = $(this).val();
													if (tablesStatus == 2) {
														$(
																"#editTableForm #p-orderDate")
																.show();
													} else {
														$(
																"#editTableForm #p-orderDate")
																.hide();
													}
												});

								//餐桌修改保存
								$("#editTableSaveBtn").click(function() {
													var id = $("#editTableForm input[name='tableId']").val();
													var tableName = $("#editTableForm input[name='tableName']").val();
													var tablesStatus = $("#editTableForm select[name='tablesStatus']").val();
													var orderDate = $("#editTableForm input[name='orderDate']").val();
													$.ajax({
																type : "post",
																url : "/table/uptadeTable",
																data : {
																	id : id,
																	tableName : tableName,
																	tablesStatus : tablesStatus,
																	orderDate : orderDate
																},
																dataType : "json",
																success : function(
																		data) {
																	if (data.success) {
																		alert("修改成功！");
																		window.location
																				.reload();
																	} else {
																		alert("修改失败！");
																	}
																}
															});
												});

								//餐桌删除
							$("tbody").on("click", ".delete-table",
								function() {
											var msg = "您真的确定要删除吗？\n\n请确认！";
											if (confirm(msg) == true) {
												var tableId = $(this).parent()
														.siblings().eq(0)
														.text();
												$.ajax({
													type : 'POST',
													url : "/table/deleteTable",
													data : {
														id : tableId
													},
													dataType : "json",
													success : function() {
														alert('删除成功！');
														window.location
																.reload();
													}
												});
												return true;
											} else {
												return false;
											}
										});

							});

			/*]]>*/
		</script>
		<!-- /Calendar -->
	</div>
	<!-- /modal -->
	<!-- Le javascript
================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
